<template>
  <div id="course">
    <h1>课程页面</h1>
    


    <div v-for='(item,index) in course' :key='index'>
      <router-link  :to="'/teacher?_id='+item.id">
      <div class="list">
 <img :src="item.avatar" alt="">
        <div>
          <div class="real_name">{{item.real_name}}</div>
          <div class="introduction">{{item.introduction}}</div> 
        </div>
      </div>
       
      
      </router-link>
    </div>
  </div>
  
</template>

<script>
import {course} from '@/http/api'
export default {
  name: "Course",
  data() {
    return {
      page:1,
      limit:10,
      course:[]
    };
  },
  //生命周期 - 创建完成（访问当前this实例）
 async created() {
    let res =  await course({page:this.page,limit:this.limit})
    console.log(res)
    this.course=res.data.data.list


  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {},
  methods:{
    go_teacher(_id){
      // vue路由传参两种方式： 
      //第一种：query方式， 必须定义path属性， 通过query传参，通过this.$route.query接受参数，刷新页面数据不丢失
      // 只能传字符串，如果不是字符串，会转换成字符串，再传
      this.$router.push({path:'/teacher',query:{_id:_id}})

      // 第二种：params方式，必须定义name属性，通过parasms闯闯，通过this.$route.params接受参数，刷新页面数据丢失
      // 可以传数组或者对象，大小不受限制
      // this.$router.push({name:'Teacher',params:{_id:_id}})
    }
  }
};
</script>
<style scoped>
/* @import url(); 引入css类 */
.list{
  display: block;
  width: 90%;
  height: 100px;
  border: 1px solid black;
  display: flex;
  flex-direction: row;
  margin: 15px auto;
  align-items: center;
}
.list img{
  width: 60px;
  height: 60px;
  border-radius: 50%;
}
</style>